<template>
	<view class="confirmOrder">
		<view class="main" v-for="(item,index) in productList" :key="index">
			<view class="line">
				<view>{{item.product_name}}</view>
				<view><text>￥{{item.pay_money}}</text>
				<text class="through">￥{{item.product_money}}</text>
                </view>
			</view>
            <view class="line" v-if="item.reduction_info.reductionMoney > 0">
                <view>减免金额</view>
                <view><text>-￥{{item.reduction_info.reductionMoney}}</text>
                </view>
            </view>
            <view class="line" v-if="item.reduction_info.nextMoney > 0">
                <view>还需购买￥{{item.reduction_info.nextMoney - item.pay_money}},则可减免￥{{item.reduction_info.nextReduction}}</view>
            </view>
            <view class="line" v-if="item.reduction_info.reductionMoney > 0">
                <view>实际支付金额</view>
                <view><text>￥{{item.pay_money - item.reduction_info.reductionMoney}}</text>
                </view>
            </view>
			<!-- <view class="line"  v-if="item.discount_money > 0">
				<text>优惠金额</text>
				<text>-￥{{item.discount_money}}</text>
			</view>
			<view class="line" v-if="item.coupon_list.length > 0">
				<text>优惠券</text>
				<view class="right">
					<picker @change="bindCouponChange" :value="selCoupon[item.id]" :range="item.coupon_list" range-key="couponName" :data-id="item.id">
						<view class="item">{{selCouponName[item.id]}}</view>
					</picker>
					<view class="item" v-if="item.coupon_list.length == 0">无可用优惠券</view>
					<view class="jt"></view>
				</view>
			</view>
			<view class="line" v-if="selCouponMoney[item.id] > 0">
				<text>优惠券金额</text>
				<text>-¥{{selCouponMoney[item.id]}}</text>
			</view>
			<view class="line">
				<text>最终支付金额</text>
				<text>¥{{item.pay_money}}</text>
			</view> -->
		</view>
		<view class="main">
			<view class="line" v-if="pay.coupon_list.length > 0">
				<text>优惠券</text>
				<view class="right">
					<picker @change="bindCouponChange" :value="selCoupon" :range="pay.coupon_list" range-key="couponName">
						<view class="item">{{selCouponName}}</view>
					</picker>
					<view class="jt"></view>
				</view>
			</view>
			<view class="line" v-if="selCouponMoney > 0">
				<text>优惠券金额</text>
				<text>-¥{{selCouponMoney}}</text>
			</view>
			<view class="line">
				<text>总计</text>
				<text>¥{{total_money}}</text>
			</view>
		</view>
       <view class="bottom">
		   <view class="pic1">
			   <text>合计</text>
			   <text>{{'￥'+total_money}}</text>
		   </view>
		   <view class="btn" @click="createOrder()">确定支付</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="pay_type">
				<image @click="close" class="close" src="https://hdsq.aoorange.cn/attachment/xcx/icon/close1.png" mode="aspectFill"></image>
				<view class="title">选择支付方式</view>
				<view class="paypir">
					<text>应付金额</text>
					<text>￥{{pay_money}}</text>
				</view>
				<view class="line2"  v-if="pay.payment_type != 4 && check_use_hdq == 1 && (formData.is_use_hdq == 1 || deduction_hdq_money > 0)"  @click="setUseOther(1)">
					<text>使用互动券 {{use_hdq}} 抵扣金额 ￥{{use_hdq}}</text>
					<view :class="formData.is_use_hdq == 1 ?'check':'nocheck'"></view>
				</view>
				<view class="line2"  v-if="pay.payment_type != 4 && check_use_tea == 1 && (formData.is_use_tea == 1 || deduction_tea_money > 0)"  @click="setUseOther(2)">
					<view>使用价值为 {{use_tea}} 的中茶 抵扣金额￥{{tea_money}}(手续费:{{tea_process}})
					<br />
					{{tea_pay_rule.remark}}</view>
					<view :class="formData.is_use_tea == 1 ?'check':'nocheck'"></view>
				</view>
				<view class="line2"  v-if="pay.payment_type != 4 && pay_money > 0" @click="selPayType(5)">
					<text>余额支付 - 当前余额：{{account.user_money}}</text>
					<view :class="formData.payment_type == 5 ?'sel':'nosel'"  v-if="Number(account.user_money) >= Number(pay_money)"></view>
					<text v-else @click="jump('on_line_recharge')">余额不足</text>
				</view>
				<view class="line2" v-if="pay.payment_type != 4 && pay_money > 0"  @click="selPayType(1)">
					<text>在线微信支付</text>
					<view :class="formData.payment_type == 1 ?'sel':'nosel'"></view>
				</view>
                <view class="line2" v-if="pay.payment_type == 4">
                	<text>线下支付</text>
                	<view :class="formData.payment_type == 4 ?'sel':'nosel'"></view>
                </view>
				<view class="pay_bot" @click="subPay()">确认支付</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	var _self;
	import serve from '../static/request.js';
	import common from '../static/jump.js';
	export default {
		data() {
			return {
				account: {},
				pay: {},
				productList: {},
				selCoupon: 0,
				selCouponName: "请选择",
				selCouponMoney: 0,
				
				total_money: 0,
				pay_money: 0,
				user_hdq: 0,
				user_tea: 0,
				use_hdq: 0,
				use_tea: 0,
				tea_money: 0,
				tea_process: 0,
				tea_pay_rule: {},
				check_use_hdq: 0,
				check_use_tea: 0,
				deduction_hdq_money: 0,
				deduction_tea_money: 0,
				
				formData: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					payCode: '', 
					useCoupon: '', 
					is_use_hdq: 0, 
					is_use_tea: 0, 
					payment_type: 1, 
				},
				isSub: false,
			}
		},
		methods: {
			numFilter (value) {
				let tempVal = parseFloat(value).toFixed(3);
				let realVal = tempVal.substring(0, tempVal.length - 1);
				return realVal;
			},
			setUseOther(type) {
				if(type == 1) {
					_self.formData.is_use_hdq = _self.formData.is_use_hdq == 1 ? 0 : 1;
				} else {
					_self.formData.is_use_tea = _self.formData.is_use_tea == 1 ? 0 : 1;
				}
				_self.calculationTotalMoney();
			},
			getTeaUseInfo() {
				serve.request({
					url: '/member/member/get-tea-use-info',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
					}
				}).then(res => {
					_self.tea_pay_rule = res.data;
					_self.calculationTotalMoney();
					_self.$forceUpdate();
				});
			},
			previewOrder() {
				serve.request({
					url: '/payorder/order/print',
					data: _self.formData
				}).then(res => {
					if(res.code == 199) {
						return ;
					}
					if(res.code != 200) {
						uni.showToast({
							title: res.message,
							icon : 'none',
							success:function(){ 
								setTimeout(function () { 
									// common.jump("return_one");
									// return ;
								}, 2000) 
							} 
						});
						return;
					}
					_self.account = res.data.account;
					_self.pay = res.data.pay;
					_self.productList = res.data.productList;
					_self.getTeaUseInfo();
				});
			},
			bindCouponChange: function(e) {
				let key = e.detail.value;
				let couponItem = _self.pay.coupon_list[key];
				_self.selCoupon = couponItem.couponId;
				_self.selCouponName = couponItem.couponName;
				_self.selCouponMoney = couponItem.couponMoney;
				_self.calculationTotalMoney();
				_self.$forceUpdate();
			},
			close() {
				_self.$refs.popup.close();
			},
			createOrder() {
                if(_self.pay.payment_type == 4) {
                    _self.formData.payment_type = 4;
                }
				_self.$refs.popup.open();
				return ;
			},
			subPay() {
				// let selCouponStr = '';
				// _self.selCoupon.forEach((v, k) => {
				// 	selCouponStr += k+':'+v+';';
				// });
				_self.formData.useCoupon = _self.selCoupon;
				uni.showLoading({
					title: _self.formData.payment_type == 5 ? '支付中···' : '微信支付···',
					mask: true
				});
				serve.request({
						url: '/payorder/order/pay-item',
						data: _self.formData
				}).then(res => {
					uni.hideLoading();
					if(res.code == 200) {
						if(res.data.is_pay == 1) {
							_self.wechatPay(res.data.dataId);
							return ;
						}
						uni.redirectTo({
							url: '/myOrder/order/payView?id='+res.data.dataId
						});
						return ;
					} 
					uni.showToast({
						title: res.message,
						icon : 'none'
					});
				});
			},
			wechatPay(operateId){
				var self = this;
				serve
					.request({
						url: '/order/pay/wechat',
						data:{
							appkey: uni.getStorageSync('appkey'),
							'access-token': uni.getStorageSync('access-token'),
							data_id:operateId,
							data_type : 'order_pay',
							is_use_hdq: _self.formData.is_use_hdq
						}
					})
					.then(res => {
						if(res.code != 200) {
							uni.showToast({
								title:res.message,
								icon: 'none'
							});
							return ;
						}
						let payId = res.data.payId;
						let payConfig = res.data.payConfig;
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: payConfig.timeStamp,
							nonceStr: payConfig.nonceStr,
							package: payConfig.package,
							signType: payConfig.signType,
							paySign: payConfig.paySign,
							success: function (res) {
								// _self.paySuccess(operateId, 'wechat');
								_self.queryPayResult(payId);
								return ;
							},
							fail: function (err) {
								// _self.queryPayResult(payId);
								uni.showModal({
								    title: '提示',
								    content: '放弃支付，如需支付请重新扫码',
									showCancel: false,
									success: function(res) {
										uni.navigateBack({
										    delta: 1
										});
									}
								});
								return ;
							}
						})
					});
				return ;
			},
			queryPayResult(payId) {
				uni.showLoading({
					title: '支付结果查询中···',
					mask: true
				});
				var self = this;
				setTimeout(function() {
					serve.request({
						url: '/payservice/query-pay',
						data:{
							appkey: uni.getStorageSync('appkey'),
							payId: payId,
						}
					}).then(res => {
						if(res.data.payStatus == 1) {
							uni.redirectTo({
							    url: '/myOrder/order/payView?id='+_self.formData.payCode
							});
							_self.$refs.popup.close();
						} else {
							_self.queryPayResult(payId);
						}
					});
				}, 1500);
			},
			selPayType(payType) {
				_self.formData.payment_type = payType;
			},
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			},
			calculationTotalMoney() {
				_self.user_hdq = JSON.parse(JSON.stringify(_self.account.user_integral));
				_self.user_tea = JSON.parse(JSON.stringify(_self.account.user_tea));
				var item = _self.pay;
				var totalMoney = Number(_self.pay.pay_money);
				var payMoney = Number(_self.pay.pay_money);
				_self.deduction_hdq_money = _self.pay.deduction_hdq;
				_self.deduction_tea_money = _self.pay.deduction_tea;
				var totalHdq = 0;
				var totalTea = 0;
				var totalTeaMoney = 0;
				var totalTeaProcess = 0;
				_self.check_use_hdq = 0;
				_self.check_use_tea = 0;
				if(_self.selCoupon > 0) {
					let couponMoney = _self.selCouponMoney;
					payMoney = Number(payMoney) - Number(couponMoney);
					totalMoney = Number(totalMoney) - Number(couponMoney);
				}
				if(_self.deduction_hdq_money > 0 && _self.user_hdq > 0) {
					_self.check_use_hdq = 1;
					let sjHdq = Number(_self.user_hdq) > Number(_self.deduction_hdq_money) ? Math.ceil(_self.deduction_hdq_money) : _self.user_hdq;
					totalHdq = Number(totalHdq) + Number(sjHdq);
					_self.user_hdq = Number(_self.user_hdq) - Number(sjHdq);
					if(_self.formData.is_use_hdq) {
						_self.deduction_hdq_money = Number(_self.deduction_hdq_money) - Number(sjHdq);
						_self.deduction_tea_money = Number(_self.deduction_tea_money) - Number(sjHdq);
						payMoney = Number(payMoney) - Number(sjHdq);
						console.info('sjHdq -- ' + sjHdq);
					}
				}
				if(_self.tea_pay_rule.is_use_tea == 1 && _self.user_tea > 0 && _self.deduction_tea_money > 0) {
					_self.check_use_tea = 1;
					let nowProcess = _self.numFilter((_self.deduction_tea_money * _self.tea_pay_rule.use_tea_ratio) / 100);
					let nowTea = Number(nowProcess) + Number(_self.deduction_tea_money);
					let nowTeaMoney = _self.deduction_tea_money;
					if(Number(nowTea) > Number(_self.user_tea)) {
						nowTeaMoney = _self.numFilter(_self.user_tea / (Number(1) + Number(_self.tea_pay_rule.use_tea_ratio / 100)));
						nowTea = _self.user_tea;
						nowProcess = _self.numFilter(Number(nowTea) - Number(nowTeaMoney));
					}
					totalTea = Number(totalTea) + Number(nowTea);
					totalTeaMoney = Number(totalTeaMoney) + Number(nowTeaMoney);
					totalTeaProcess = Number(totalTeaProcess) + Number(nowProcess);
					_self.user_tea = Number(_self.user_tea) - Number(nowTea);
					if(_self.formData.is_use_tea) {
						_self.deduction_tea_money = Number(_self.deduction_tea_money) - Number(totalTeaMoney);
						payMoney = Number(payMoney) - Number(totalTeaMoney);
						if(!_self.formData.is_use_hdq && totalTeaMoney == _self.pay.money_zero) {
							_self.check_use_hdq = 0;
						}
					}
				}
				// _self.formData.payment_type = payMoney > 0 ? 1 : 0;
				_self.total_money = _self.numFilter(totalMoney);
				_self.pay_money = _self.numFilter(payMoney);
				_self.use_hdq = _self.numFilter(totalHdq);
				_self.use_tea = _self.numFilter(totalTea);
				_self.tea_money = _self.numFilter(totalTeaMoney);
				_self.tea_process = _self.numFilter(totalTeaProcess);
				_self.$forceUpdate();
			},
		},
		onLoad(options) {
			_self = this;
			_self.formData.payCode = options.payCode || 0;
			if(options.q) {
				console.info(options.q);
				var link = decodeURIComponent(options.q);
				var paramArr = link.split('=');
				console.info(paramArr);
				_self.formData.payCode = paramArr[1];
			} 
			if(_self.formData.payCode == 0){
				uni.showToast({
					title: "错误的访问方式",
					icon: 'none',
					success() {
						setTimeout(function () {
							common.jump('return_one')
						}, 2000) 
					}
				});
				return ;
			}
		},
		onShow() {
			_self.formData["access-token"] = uni.getStorageSync('access-token');
			_self.previewOrder();
		},
		onPullDownRefresh() {
			console.log('refresh');
			_self.previewOrder();
		}
	}
</script>

<style scoped lang="scss">
	@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
		    .confirmOrder {
		        padding-bottom: 124upx !important;
				.bottom{
					 padding-bottom: 12px !important;
				}
		    }
	}
	.confirmOrder {
		padding-bottom: 100upx;
         .bottom{
			 position: fixed;
			 z-index: 100;
			 width: 100%;
			 bottom: 0upx;
			 border-top: 1upx rgba(235,236,240,1) solid;
			 align-items: center;
			 display: flex;
			 z-index: 10;
			 box-sizing: border-box;
			 padding-bottom: env(safe-area-inset-bottom);
			 height:100upx;
			 background:rgba(255,255,255,1);
			 box-shadow:0px 1px 0px 0upx rgba(235,236,240,1);
			 padding-left: 30upx;
			 font-size:24upx;
			 color:rgba(60,72,104,0.5);
			 .pic1{
				 font-size:20upx;
				 // margin-left: 100upx;
				 color:rgba(60,72,104,0.5);
				 text:last-child{
					 font-size:28upx;
					 color:#EB5938;
					 margin-left: 10upx;
				 }
			 }
			 .btn{
				 position: absolute;
				 height: 100%;
				 width:300upx;
				 background:#EB5938;
				 line-height:100upx ;
				 text-align: center;
				 font-size:28upx;
                 font-weight:bold;
                 color:rgba(255,255,255,1);
				 right: 0upx;
			 }
		 }
		.top {
			position: relative;
			border-bottom: 16upx rgba(251, 251, 253, 1) solid;
             .noaddress{
				 height: 190upx;
				 width: 100%;
				 display: flex;
				 justify-content: center;
				 align-items: center;
				 image{
					 width:40upx;
				 }
				 text{
					 font-size:32upx;
					 font-weight:bold;
					 color:rgba(235,89,56,1);
					 margin-left: 10upx;
				 }
			 }
			.address {
				display: flex;
				position: relative;
				padding: 53upx 70upx;
				font-size: 28upx;
				font-weight: bold;
				align-items: center;

				image {
					position: absolute;
					left: 30upx;
					width: 31upx;
					height: 37upx;
					top: 120upx;
				}

				.txt {
					display: flex;
					justify-content: space-between;
					padding-bottom: 28upx;
				}

				.jt {
					position: absolute;
					right: 30upx;
					top: 105upx;
					content: '';
					border: 1upx solid rgba(57, 72, 107, 0.5);
					border-width: 0 3upx 3upx 0;
					padding: 6upx;
					transform: rotate(-45deg);
					-webkit-transform: rotate(-45deg);
				}
			}

			.img {
				position: absolute;
				bottom: 0;
				height: 10upx;
				width: 100%;
			}
		}
		.main {
			border-bottom: 16upx rgba(102,102,102,0.05) solid;
			width: 100%;
			.goods_top {
				display: flex;
				padding: 33upx 30upx 0upx;
				box-sizing: border-box;
				justify-content: space-between;
				align-items: center;
		
				.left {
					font-size: 28upx;
					display: flex;
					align-items: center;
					color: #333333;
		
					image {
						width:40upx;
						height:35upx;
						margin-right: 13upx;
					}
		
					text {
						position: relative;
						padding-right: 30upx;
					}
		
				}
		
				.right {
					font-size: 32upx;
					display: flex;
					align-items: center;
		
					image {
						width: 27upx;
						height: 33upx;
						margin-right: 20upx;
					}
		
				}
			}
			.goods:last-child{
				border: none;
			}
			.goods {
				box-sizing: border-box;
				display: flex;
				align-items: center;
				padding: 40upx 30upx;
				border-bottom: 1upx rgba(235, 236, 240, 1) solid;

				image {
					width: 170upx;
					height: 170upx;
					margin-right: 20upx;
				}

				.right {
					position: relative;
					width: 503upx;
					display: flex;
					flex-direction: column;			
					height: 170upx;
					.size {
						display: flex;
						justify-content: space-between;
						margin-top: 21upx;
						color: #999999;
						font-size: 24upx;
						align-items: center;
						font-weight: 400;
					}

					text:first-child {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size:32upx;
						font-weight: bold;
					}

					.pic1 {
						font-size: 28upx;
						color: #FF5F60;
						font-weight: bold;
					}
					.oldpic{
						color: #CCCCCC;
						font-size: 20upx;
						text-decoration:line-through;
					}
				}
			}

		}
			.line {
				position: relative;
				box-sizing: border-box;
				padding: 37upx 30upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28upx;
				color: #666666;
				border-bottom: 1upx rgba(235, 236, 240, 1) solid;

				text{
					color: #EB5938;
					font-size: 32upx;
				}
				.through{
					color: #ccc;
					text-decoration:line-through;
				}
				.jt {
					position: absolute;
					right: 10upx;
					top: 49upx;
					content: '';
					border: 1upx solid #CCCCCC;
					border-width: 0 3upx 3upx 0;
					padding: 6upx;
					transform: rotate(-45deg);
					-webkit-transform: rotate(-45deg);
				}
				
			}

			.pic {
				box-sizing: border-box;
				padding: 37upx 30upx;
				display: flex;
				justify-content: flex-end;
				font-size: 20upx;
				color: rgba(60, 72, 104, 1);
				border-bottom: 1upx rgba(235, 236, 240, 1) solid;

				text:last-child {
					color: rgba(255, 198, 0, 1);
					font-size: 28upx;
				}

				;
			}

			.common {
				box-sizing: border-box;
				padding: 37upx 30upx;
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				align-items: flex-start;
				// font-weight: bold;
				font-size: 28upx;
				color: #666666;
				textarea{
					position: relative;
					font-size:28upx;
					margin-top: 34upx;
					padding: 24upx 28upx;
					height:92upx;
					background:rgba(252,252,253,1);
					border-radius:12upx;
					z-index: 0;
				}
			}
		.pay_type{
			position: relative;
			z-index: 200;
			width: 100%;
			background: #FFFFFF;
			padding-bottom: 140upx;
			.close{
				position: absolute;
				width:23upx;
				height:23upx;
				right: 40upx;
				top: 45upx;
			}
			.title{
				width: 100%;
				text-align: center;
				height: 100upx;
				line-height: 100upx;
				font-size: 36upx;
				border-bottom: 1upx rgba(251, 251, 253, 1) solid;
			}
			.paypir{
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				padding: 50upx 0upx 20upx;
				font-size: 28upx;
				text:last-child{
					color: #FF5F60;
					font-size: 40upx;
					font-weight: bold;
					margin-top: 10upx;
				}
			}
			.line2{
				width: 100%;
				box-sizing: border-box;
				padding: 36upx;
				display: flex;
				justify-content: space-between;
				font-size: 28upx;
				color: #333333;
				border-bottom: 1upx rgba(251, 251, 253, 1) solid;
				.txt{
					color: #999999;
				}
				
				.nosel {
					width: 36upx;
					height: 36upx;
					border: 1upx solid rgba(60, 72, 104, 1);
					border-radius: 50%;
				}
				.sel {
					background-image: url(../static/img/check.png);
					background-repeat: no-repeat;
					width: 40upx;
					height: 40upx;
					background-size: 100%;
				}
				.nocheck {
					width: 36upx;
					height: 36upx;
					border: 1upx solid rgba(60, 72, 104, 1);
					border-radius: 20%;
				}
				.check {
					background: url(../static/img/checkbox_check.png);
					background-repeat: no-repeat;
					width: 40upx;
					height: 40upx;
					background-size: 100%;
				}
			}
			.pay_bot {
			  width: 100%;
			  position: fixed;
			  left: 0;
			  bottom: 0;
			  height: 100upx;
			  background: #FFBF0A;
			  color: #fff;
			  font-size: 32upx;
			  line-height: 100upx;
			  text-align: center;
			  border-radius: 0;
			  &::after{
				  border: none;
			  }
			}
		}
	}
</style>
